<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>

        div {
            width: 300px;
            background-color: pink;
        }

        .title {
            font-size: 30px; /*字体大小*/
            font-family: "微软雅黑 Light"; /*字体样式*/
            color: red; /*字体颜色*/
            font-weight: bold;
            text-indent: 1em; /*首行缩进*/
            line-height: 40px;
            background-color: pink;
        }

        ul {
            background-color: pink;
        }

        ul li {
            list-style: none; /*去除原点*/
            /*list-style: square; !*正方形*!*/
            /*list-style: circle; !*空心圆*!*/
            /*list-style: disc; !*实现园*!*/
            /*list-style: decimal;!*数字*!*/
            height: 30px;
            line-height: 30px;

        }

        a {
            text-decoration: none;
            font-size: 16px;
            color: black;
        }

        /*超链接伪类*/
        a:hover {
            color: green;
            text-decoration: overline;
        }

        a:active {
            color: red;
        }

    </style>


</head>
<body>

<div>
    <h2 class="title">全部商品分类</h2>

    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>



</body>
</html>